<template>
  <div id="centerTop">
    
      
      <div class="d-flex jc-center">

          <div class="total">
            <div class="data1">
                    <span>水口</span>
                    <p>xxx兆瓦</p>
             </div>
             <div class="data2">
                     <span>水东</span>
                     <p>xxx兆瓦</p>
             </div>
             <div class="data3">
                      <span>嵩滩辅</span>
                      <p>xxx兆瓦</p>
             </div>
             <div class="data4">
                      <span>街面</span>
                      <p>xxx兆瓦</p>
             </div>
             <div class="data5">
                      <span>雍口</span>
                      <p>xxx兆瓦</p>
             </div>
             <div class="sphere">
                             
                   <div class="sum">
                         <span>集团</span>
                         <p>xxx兆瓦</p>
                   </div>

              </div>
          </div>

          

  </div>
      
   
  <div class="table-wrapper">
     
      <!-- 关于弹窗 -->
      <el-dialog
        
        :visible.sync="DialogVisible"
         width="50%"
        :before-close="DialogClose"
      >
        <sysConfig />
      </el-dialog>
     
      
    </div>
  </div>
</template>

<script>

import sysConfig from './sysConfig'
export default {
  data() {
    return {
      chart: null,
      DialogVisible: false
    };
  },
  components: {
   
    sysConfig
   
  },

  mounted() {},
  methods: {
    DialogShowHandler () {
      this.DialogVisible = true
    },
    DialogClose () {
      this.DialogVisible = false
    },
  }
 
};
</script>

<style lang="scss">
  #centerTop{
    height: 500px;
  }
  .sphere {
      width: 6rem;
      height: 6rem;
      position: relative;
      margin: 12% auto 0;
  }
  .sphere .sum {
      position: absolute;
      z-index: 100;
      left: 0;
      top: 0rem;
      width: 100%;
      height: 100%;
      background: url(../assets/cloud.png) no-repeat center;
      background-size: 55%;
  }
  .sphere .sum span {
    display: block;
      margin-top: 40%;
      padding-left: 45%;
      color: #fff;
      font-size: 0.30rem;
  }
  .sphere .sum p {
      margin-top: 5%;
      text-align: center;
      color: #fff;
      font-size: 0.45rem;
      /*background: url(../assets/cb.png) no-repeat center;*/
      
  }
  .total {
    position: relative;
    width: 100%;
    height: 500px;
  }
  .total .data1,
  .total .data2,
  .total .data3,
  .total .data4,
  .total .data5{
    width: 3.5rem;
    height: 1.5rem;
    position: absolute;
    text-align: center;
    background: url(../assets/border.png) no-repeat;
    background-size: 100%;
    line-height: 0.35rem;
    padding-top: 0.15rem;
  }
  .total .data1 span,
  .total .data2 span,
  .total .data3 span,
  .total .data4 span,
  .total .data5 span{
    color: #0ac1c7;
    font-size: 0.32rem;
   
  }
  .total .data1 p,
  .total .data2 p,
  .total .data3 p,
  .total .data4 p,
  .total .data5 p{
    font-size: 0.45rem;
    color: #f29701;
   
  }
  .total .data1 {
    left: 15%;
    top: 85%;
  }
  .total .data2 {
    left: 38%;
    top: 15%;
  }
  .total .data3 {
    left: 2%;
    top: 50%;
  }
  .total .data4 {
    left: 68%;
    top: 50%;
  }
  .total .data5 {
    top: 85%;
    left: 65%;
  }
</style>